<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:composite="http://java.sun.com/jsf/composite">

    <h:head>
        <f:facet name="first">
            <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
        </f:facet>
    </h:head>

    <composite:interface>
        <composite:attribute name="isEditable" type="java.lang.Boolean"/>
    </composite:interface>

    <composite:implementation>

            <p:panelGrid id="formComposicionArticulo" rendered="#{!cc.attrs.isEditable}" >
                <p:row>
                    <p:column>
                        <h:outputText value="CATEGORIA ARTICULO: " id="lblCategriaArticulo" class="lblForm" />

                    </p:column>
                    <p:column>
                        <p:selectOneMenu id="cbxCategoriaArticulo" required="true" var="categ"
                                         value="#{BKComposicionArticulo.idCategoriaArticulo}" converter="#{categoriaArticuloConverter}"
                                         style="width: 140px" filter="true" filterMatchMode="contains"> 
                            <f:selectItem itemLabel="Seleccionar" itemValue="" /> 
                            <f:selectItems value="#{BKComposicionArticulo.listaCategoriaArticuloActivos}" var="cat" 
                                           itemLabel="#{cat.nombre}" itemValue="#{cat}"/>	
                            <p:column>  
                                #{categ.nombre}
                            </p:column>  
                            <p:ajax update="idArticulo" listener="#{MBComposicionArticulo.buscarArticulo}" event="change" />  
                        </p:selectOneMenu>
                        <p:message for="cbxCategoriaArticulo"/>
                        <h:outputLink value="#{request.contextPath}#{MBCategoriaArticulo.nuevo()}.anx" target="_blank" class="linkAgregar" >Agregar Categoría</h:outputLink>

                    </p:column>
                    <p:column>
                        <h:outputText value="ARTICULO(*): " id="lblArticulo" class="lblForm" />

                    </p:column>
                    <p:column >
                        <p:selectOneMenu value="#{BKComposicionArticulo.idArticulo}" required="true" id="idArticulo"
                                         panelStyleClass="print" converter="#{articuloConverter}" panelStyle="width:100px" style="width: 450px"
                                         filter="true" filterMatchMode="contains" var="arti" >  
                            <f:selectItem itemLabel="Seleccionar" itemValue="" />  
                            <f:selectItems value="#{BKComposicionArticulo.listaArticuloActivos}" var="art" 
                                           itemLabel="#{art.nombreComercial} #{(art.datosTecnicos eq null) or (art.datosTecnicos eq '')?'':'('}
                                           #{art.datosTecnicos}#{(art.datosTecnicos eq null) or (art.datosTecnicos eq '')?'':')'}" itemValue="#{art}" /> 
                            <p:column styleClass="print">  
                                #{arti.nombreComercial} #{(arti.datosTecnicos eq null) or (arti.datosTecnicos eq '')?'':'('}
                                #{arti.datosTecnicos}#{(arti.datosTecnicos eq null) or (arti.datosTecnicos eq '')?'':')'}
                            </p:column>  
                        </p:selectOneMenu>
                        <p:message for="idArticulo" display="text"/>
                    </p:column>
                </p:row>

                <p:row>
                    <p:column>
                        <h:outputText value="CANTIDAD(*): " id="lblCantidad" class="lblForm" />

                    </p:column>
                    <p:column colspan="3">    
                        <p:inputText value="#{BKComposicionArticulo.formularioArticulo.cantidad}" id="txtCantidad" required="true"
                                     style="float: left;width: 70px">
                        </p:inputText>
                        <p:message for="txtCantidad" display="text"/>
                        <p:selectOneMenu id="cbxUnidadMedida" required="true" 
                                         value="#{BKComposicionArticulo.formularioArticulo.tipo}" style="float: left;"> 
                            <f:selectItem itemLabel="Seleccionar" itemValue="" /> 
                            <f:selectItems value="#{BKComposicionArticulo.listaTipoUnidadMinima}" var="unidad" 
                                           itemLabel="#{unidad.abrev}" itemValue="#{unidad.abrev}" />	
                        </p:selectOneMenu>	
                        <p:message for="cbxUnidadMedida" display="text"/>
                    </p:column>
                </p:row>

                <p:row>
                    <p:column colspan="4">    
                        <p:commandButton id="btnAgregarArticulo" actionListener="#{MBComposicionArticulo.agregarArticulo}" 
                                         ajax="true" update="dataTablaArticulo,formComposicionArticulo"  
                                         value="AGREGAR"/>
                    </p:column>
                </p:row>
            </p:panelGrid>

        <p:panel header="LISTA DE ARTICULO">
            <p:dataTable id="dataTablaArticulo" var="articulo" value="#{BKComposicionArticulo.listaArticulo}" widgetVar="carsTable"
                         emptyMessage="No se encontraron articulos" rowsPerPageTemplate="20,40,60" editable="true"
                         paginator="true" rows="20" paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink}
                         {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" rowIndexVar="rowIndex" >

                <p:ajax event="rowEdit" listener="#{MBComposicionArticulo.editarArticulo}"/>  
                
                <p:column id="idColumnaNum" style="width: 5%" headerText="Num.">
                    <h:outputText value="#{rowIndex+1}" />
                </p:column>

                <p:column id="idColumnaCategoria" headerText="CATEGORIA">
                    <h:outputText value="#{articulo.idArticuloComp.idCategoriaArticulo.nombre}" />  
                </p:column>

                <p:column id="idColumnaNombre" headerText="ARTICULO">
                    <h:outputText value="#{articulo.idArticuloComp.nombreComercial}" />  
                </p:column>

                <p:column id="idColumnaCantidad" headerText="CANTIDAD">
                    <p:cellEditor>  
                        <f:facet name="output"> 
                            <h:outputText value="#{articulo.cantidad}" />
                            <h:outputText value="#{articulo.tipo}" />  
                        </f:facet>  
                        <f:facet name="input">  
                            <p:inputText value="#{articulo.cantidad}" style="width:100%" maxlength="150" required="true"/>  
                        </f:facet>  
                    </p:cellEditor> 
                </p:column>

                <p:column id="idColumnaDatosT" headerText="DATOS TÉCNICOS">

                    <h:outputText value="#{articulo.idArticuloComp.datosTecnicos}" /> 

                </p:column>

                <p:column rendered="#{!cc.attrs.isEditable}">             
                    <p:commandButton id="selectButton" oncomplete="confirmacion.show()" ajax="true" immediate="true"
                                     icon="ui-icon-trash" >
                        <f:setPropertyActionListener value="#{articulo}" target="#{BKComposicionArticulo.currentArticulo}"/>
                    </p:commandButton>
                    <p:rowEditor />
                </p:column>    
            </p:dataTable>   
        </p:panel>
        <p:confirmDialog id="dlgEliminarArticulo" message="#{message['dialog.confirmacion.mensaje']}"
                         header="#{message['dialog.confirmacion.header']}" severity="alert" widgetVar="confirmacion">
            <h:panelGrid style="width: auto;margin:0px auto;border:0px;padding: 0 5px" columns="2">      
                <p:commandButton id="btnConfEliArticulo" actionListener="#{MBComposicionArticulo.eliminarArticulo}" update="dataTablaArticulo"
                                 value="Si" oncomplete="confirmacion.hide()" immediate="true" style="text-align: center"  />
                <p:commandButton id="btnCancEliArticulo" value="No" onclick="confirmacion.hide()" type="button" style="text-align: center" />
            </h:panelGrid>
        </p:confirmDialog>    
    </composite:implementation>
</html>